<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">--%>
<%--    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>--%>
<%--    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>--%>
<%--    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>--%>
<%--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/bootstrap/4.5.3/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/webjars/jquery/3.5.1/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/webjars/popper.js/1.16.0/popper.js" type="module"></script>
    <script src="${pageContext.request.contextPath}/webjars/bootstrap/4.5.3/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/webjars/vue/2.6.11/vue.js"></script>
    <title>Title</title>
<body>

<div class="jumbotron">
    <H1>JSON</H1>
</div>

<div class="container">
    <div class="row">
        <a href="${pageContext.request.contextPath}/test/json/api/01" class="btn btn-primary">TO_JSON-PAGE</a>

        <button id="ajax_01" class="btn btn-primary">AJAX-GET-JSON</button>
        <p id="content">SHOW JSON STRING</p>
        <script>
            $("#ajax_01").click(function () {
                $.get("${pageContext.request.contextPath}/test/json/api/02", {}, function (data) {
                    console.log(data)
                    $("#content").text(data.name)
                })
            })

        </script>

    </div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>

</body>
</html>
